{% extends 'users/usercenter-base.html' %}
{% load staticfiles %}

{% block title %}我的消息- 谷粒教育网{% endblock %}

{% block breach %}我的消息{% endblock %}

{% block reght %}
    <div class="right" >
        <div class="personal_des Releasecont">
            <div class="head">
                <h1>我的消息</h1>
            </div>
        </div>

        <div class="personal_des permessage">
            <div class="head">
                <ul class="tab_header messagehead">
                    <li class="active"><a href="{% url 'users:user_message' %}">个人消息</a> </li>
                </ul>
            </div>

            <div class="messagelist">
            {% for msg in msg_list %}
                <div class="messages" msg-id="{{ msg.id }}">
                    <div class="fr">
                        <div class="top"><span class="fl time">{{ msg.add_time }}</span><span class="fr btn foldbtn"></span></div>
                        {# 当消息表状态为False时,未读消息显示红色 #}
                        <p {% if not msg.message_status %} style="color: red"  {% endif %}>
                            {{ msg.message_content }}
                        </p>
                    </div>
                </div>
            {% endfor %}

            </div>

             {# 消息分页 #}
{#            <div class="pageturn pagerright">#}
{#                <ul class="pagelist">#}
{##}
{#                    <li class="active"><a href="?page=1">1</a></li>#}
{##}
{#                </ul>#}
{#            </div>#}
        </div>

    </div>
{% endblock %}

{% block user %}{% endblock %}

{% block myjs1 %}
<script>
    // 页面加载完成
    $(function () {
        // 点击div消息块,把未读消息变成已读消息
        $('.messages').click(function () {
            var msgid = $(this).attr('msg-id');
            $.ajax({
                type:'GET',
                url:'{% url 'users:user_deletemessage' %}',
                data:{
                    msgid:msgid,
                },
                success:function (callback) {
                    if(callback.status == 'ok'){  // 未读消息状态已更改为True(已读)
                        // 然后修改消息内容的颜色样式,即刷新页面
                        window.location.reload()
                    }else{
                        alert(callback.msg)
                    }
                }
            })

        });
    })
</script>
{% endblock %}
